<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我发起的留言</title>
<!-- jquery -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'<c:url value="/mycallMsg" />',
			dataType:'json',
			type:'post',
			success:function(re){
				for(var i=0;i<re.length;i++){
					var msg=re[i];
					var boxDiv= $("<div name='box'></div>");
					boxDiv.attr("data-lgroup",msg.lgroup);
					var titleDiv=$("<div name='title'></div>");
					var contentDiv=$("<div name='content'></div>");
					contentDiv.text(msg.lcontent);
					var floorSpan=$("<span name='floor'></span>");
					floorSpan.text("第"+msg.floor+"楼");
					var unameSpan=$("<span name='mine'>我</span>");
					var pushTimeSpan=$("<span name='pushTime'></span>");
					var rebtn=$("<a name='showre'>回复</a>");
					pushTimeSpan.text(msg.pushtime);
					titleDiv.append(floorSpan);
					titleDiv.append(unameSpan);
					titleDiv.append(pushTimeSpan);
					titleDiv.append(rebtn);
					boxDiv.append(titleDiv);
					boxDiv.append(contentDiv);
					$("#msgContainer").append(boxDiv);
				}
				
				//点击回复，显示回复的div
				$("a[name='showre']").click(function(){
					var curBox=$(this).parent().parent();
					var reDiv=$("<textarea name='reMsg' placeholder='回复:' rows='5' cols='114'></textarea>");
					curBox.append(reDiv);
					var rebtn=$("<a name='rebtn' class='btn btn-primary' style='margin-left:650px;'>确认回复</a>");
					curBox.append(rebtn);
					
					//点击确认回复发送请求
					$("a[name='rebtn']").click(function(){
						//获取被留言者ID
						var oid=$(this).parent().find("span[name='reuname']").attr('data-uid');
						//获取留言所在的组
						var lgroup=$(this).parent().attr("data-lgroup");
						//获取输入的内容
						var lcontent=$(this).prev().val();
						$.ajax({
							url:'<c:url value="/returnMsg" />',
							data:{"oid":oid,"lcontent":lcontent,"lgroup":lgroup},
							dataType:'json',
							type:'post',
							success:function(re){
								if(re.flag){
									alert("回复消息成功");
									location.href="<c:url value='/path/mycallmsg.jsp' />";
								}
							}
						})
					})
				})
				
				
				
				//当div加载时，显示回复
				$("div[name='box']").show(function(){
					var lgroup=$(this).attr('data-lgroup');
					$.ajax({
						url:'<c:url value="/MyCallReturn" />',
						data:{"lgroup":lgroup},
						dataType:'json',
						type:'post',
						success:function(re){
							var callMsgReturn=re.callMsgRe;
							for(var i=0;i<callMsgReturn.length;i++){
								var curRe=callMsgReturn[i];
								if(curRe.uid==re.curuid){
									var reTitleDiv=$("<div name='retitle'></div>");
									var reContentDiv=$("<div name='recontent'></div>");
									var reUnameSpan=$("<span name='reuname'></span>");
									var reTxtSpan=$("<span name='reTxt'>回复</span>");
									var reTimeSpan=$("<span name='reTime'></span>");
									reTimeSpan.text(curRe.pushtime);
									reUnameSpan.text("我");
									reContentDiv.text(curRe.lcontent);
									reTitleDiv.append(reUnameSpan);
									reTitleDiv.append(reTxtSpan);
									reTitleDiv.append(reTimeSpan);
									$("div[data-lgroup='"+lgroup+"']").append(reTitleDiv);
									$("div[data-lgroup='"+lgroup+"']").append(reContentDiv);
								}else{
									var reTitleDiv=$("<div name='retitle'></div>");
									var reContentDiv=$("<div name='recontent'></div>");
									var reUnameSpan=$("<span name='reuname'></span>");
									var reTxtSpan=$("<span name='reTxt'>回复</span>");
									var reTimeSpan=$("<span name='reTime'></span>");
									reTimeSpan.text(curRe.pushtime);
									reUnameSpan.text(curRe.uname);
									reUnameSpan.attr("data-uid",curRe.uid);
									reContentDiv.text(curRe.lcontent);
									reTitleDiv.append(reUnameSpan);
									reTitleDiv.append(reTxtSpan);
									reTitleDiv.append(reTimeSpan);
									$("div[data-lgroup='"+lgroup+"']").append(reTitleDiv);
									$("div[data-lgroup='"+lgroup+"']").append(reContentDiv);
								}
							}
						}
					})
				
					
				})
			}
		})
		
	})
</script>
<style type="text/css">
span[name='floor']{
		color:gray;
		display:inline-block;
		width:100px;
		height:20px;
		line-height:20px;
		font-size:16px;
	}
span[name='mine']{
	width:100px;
	height:20px;
	line-height:20px;
	display:inline-block;
	font-size:16px;
	font-weight:bold;
}
span[name='pushTime']{
	width:200px;
	height:20px;
	line-height:20px;
	display:inline-block;
	color:gray;
}
div[name='content']{
	width:800px;
	font-size:16px;
	min-height:100px;
	margin-top:20px;
	margin-bottom:10px;
	background:#ccddff;
	padding:15px 10px;
}
div[name='box']{
	margin-bottom:30px;
	border-top:2px dotted orange;
	border-bottom:2px dotted orange;
	background:#eeffbb;
	padding:25px 30px;
}
span[name='reuname']{
	width:80px;
	height:20px;
	line-height:20px;
	display:inline-block;
	font-size:14px;
	font-weight:bold;
}
span[name='reTime']{
	width:200px;
	height:20px;
	line-height:20px;
	display:inline-block;
	margin-left:20px;
	color:gray;
}
div[name='recontent']{
	width:800px;
	font-size:16px;	
	min-height:50px;
	margin-top:20px;
	margin-bottom:10px;
	background:#ccddff;
	padding:15px 10px;
}
a[name='showre']{
	cursor: pointer;
	color:blue;
}
</style>
</head>
<body>
 	 <div class="container">
 		<div class="row">
 			<h3 class="text-primary" style="text-align:center;">我发起的留言</h3>
 		</div>
 		<div id="msgContainer" class="row">
 			
 		</div>
 	</div>
</body>
</html>